<html>
<head>
  <title>iUI iPad CanSVG Demo</title>
  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
  <link rel="icon" type="image/png" href="../../iui/iui-favicon.png">
  <link rel="apple-touch-icon" href="../../iui/iui-logo-touch-icon.png" />
  <!--
  Don't enable web-app-capable yet, because the CSS is sized for having Safari's top bar
  <meta name="apple-mobile-web-app-capable" content="yes" />
  -->
  <link rel="stylesheet" href="../../iui/iui.css" type="text/css" />
  <link rel="stylesheet" title="Default" href="../../iui/t/default/default-theme.css"  type="text/css"/>
  <link rel="stylesheet" href="../../css/iui-panel-list.css" type="text/css" />
  <link rel="stylesheet" href="../../iui/ext-sandbox/iscroll/iui-iscroll.css" type="text/css" />
  <script type="application/x-javascript" src="../../iui/iui.js"></script>
  <script type="application/x-javascript" src="../../iui/ext-sandbox/iscroll/iscroll.js"></script>
  <script type="application/x-javascript" src="../../iui/ext-sandbox/iscroll/iui-iscroll.js"></script>
  <script type="application/x-javascript" src="../../iui/ext-sandbox/canvg/rgbcolor.js"></script>
  <script type="application/x-javascript" src="../../iui/ext-sandbox/canvg/canvg.js"></script>
  <script type="application/x-javascript" src="../../iui/ext-sandbox/canvg/iui-canvg.js"></script>
  <script>
  	iui.debug = true;  // enable portrait/landscape swapping in desktop browser for debugging
  </script>
</head>
<body>
  <div id="iui-container" class="">
    <div class="toolbar">
        <h1 id="pageTitle"></h1>
        <a id="backButton" class="button" href="#"></a>
    </div>

	<div id="home" title="CanSVG" selected="true">
		<div class="wrapper">
			<div class="scroller">
				<ul>
					<li class="group">SVG Views ("Pages")</li>
					<li><a href="#svg1">Tiger</a></li>
					<li><a href="#svg2">Butterfly</a></li>
					<li><a href="#svg3">World</a></li>
					<li><a href="#svg4">Ball</a></li>
					<li><a href="#svg5">Tiger (SVG direct, no CanVG)</a></li>
				</ul>
			</div>
		</div>
	</div>

<div id="svg1" title="Tiger" class="content content-pane">
  <a href="../../iui/ext-sandbox/canvg/testimages/tiger.svg" target="_self" rel="iuicanvg">
    <canvas width="600px"></canvas>
  </a>
</div>  

<div id="svg2" title="Butterfly" class="content">
  <a href="../../iui/ext-sandbox/canvg/testimages/butterfly.svg" target="_self" rel="iuicanvg">
    <canvas width="600px" height="600px"></canvas>
  </a>
</div>  

<div id="svg3" title="World" class="content">
  <a href="../../iui/ext-sandbox/canvg/testimages/world.svg" target="_self" rel="iuicanvg">
    <canvas></canvas>
  </a>
</div>  

<div id="svg4" title="Ball" class="content">
  <a href="../../iui/ext-sandbox/canvg/testimages/ball.svg" target="_self" rel="iuicanvg">
    <canvas></canvas>
  </a>
</div>  

<div id="svg5" title="Tiger (direct)" class="content">
   <object type="image/svg+xml" data="../../iui/ext-sandbox/canvg/testimages/tiger.svg" width="600px" height="800px" ></object>
</div>  
		
	<div id="about" class="panel content" title="About">
	  <h2>About</h2>
	  <ul>
		<li><a target="_blank" href="http://code.google.com/p/iui/">iUI Project</a></li>
		<li><a target="_blank" href="http://code.google.com/appengine/">Google App Engine</a></li>
		<li><a target="_blank" href="http://gaelyk.appspot.com/">Gaelyk</a></li>
		<li><a target="_blank" href="http://code.google.com/p/iui/wiki/iUIOnGoogleAppEngine">iUI on GAE wiki page</a></li>
	  </ul>
	</div>
</div>

  <div id="iuipad-content-panel">
    <div class="toolbar">
        <h1 id="contentTitle"></h1>
        <a class="button leftButton" href="javascript:iui.popover_toc()" id="toc_button">TOC</a>
    </div>
    <div class="wrapper">
      <div class="scroller">
        <div id="iuipad-content">
        </div>
      </div>
    </div>
  </div>

</body>
</html>
